<template>
	<view>
		<view class="all">
			<view style="position: fixed;top: 0;z-index: 999;background: #EDF0F5;">
				<view style="width: 750upx;height: 176upx;">
					<image src="../../static/shangmen/bj.png" style="width: 750upx;height: 176upx;position: absolute;"></image>
					<!-- <view style="display: flex;justify-content: space-between;"> -->
					<view style="display: flex;">
						<view style="position: absolute;display: flex;margin-left: 20upx;line-height: 176upx;"> 
							<image src="../../static/shangmen/27.png" style="width: 38upx;height: 38upx;margin-top: 90upx;"></image>
							<view style="font-size: 29upx;color: #FFFFFF;margin-left: 6upx;margin-top: 22upx;"> {{city}} </view>
						</view>
						<view style="width: 750upx;height: 176upx;text-align: center;font-size: 36upx;line-height: 176upx;position: absolute;z-index: 1;color: #fff;">首页</view>
					</view>
				</view>
				<view style="width: 690upx;padding: 30upx;display: flex;">
					<view style="width: 600upx;background: #E3EBF6;display: flex;border-radius: 30upx;height: 60upx;">
						<image src="../../static/shangmen/sousuo.png" style="width: 32upx;height: 32upx;margin-top: 18upx;margin-left: 30upx;"></image>
						<input placeholder="请输入关键字" style="width: 500upx;margin-left: 12upx;font-size: 28upx;margin-top: 8upx;" @confirm="confirm_tap" confirm-type="search" @input="input_tap"/>
					</view>
					<view @click="confirm_tap" style="color: #999999;font-size: 30upx;margin-top: 15upx;margin-left: 30upx;">搜索</view>
				</view>
			</view>
			<view class="top" style="margin-top: 250upx;">
				<swiper class="swiper" indicator-dots :autoplay="autoplay">
					<swiper-item v-for="(item,index) in banner_list" :key="index">
						<image @click="previewImage_tap(item.id)" class="swiper_img" mode="aspectFit" :src="item.image"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="inform">
				<view class="inform_title">通知</view>
				<view class="inform_banner">
					<swiper class="inform_banner" vertical :autoplay="autoplay" >
						<swiper-item v-for="(item,index) in inform_data" :key="index">
							<view class="inform_banner">{{item}}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- <view class="advertising" style="margin-top: 20upx;background: rgba(0, 0, 0, 0);">
				<view class="advertising_box" @click="more_tap">
					<image src="/static/shangmen/1.png" mode="aspectFill" class="advertising_box_img"></image>
					<view class="advertising_box_text">日常保洁</view>
				</view>
				<view class="advertising_box" @click="news">
					<image src="/static/shangmen/2.png" mode="aspectFill" class="advertising_box_img"></image>
					<view class="advertising_box_text">家电清洗</view>
				</view>
				<view class="advertising_box" @click="assets">
					<image src="/static/shangmen/3.png" mode="aspectFill" class="advertising_box_img"></image>
					<view class="advertising_box_text">保姆</view>
				</view>
				<view class="advertising_box" @click="fenxiang">
					<image src="/static/shangmen/4.png" mode="aspectFill" class="advertising_box_img"></image>
					<view class="advertising_box_text">月嫂</view>
				</view>
				<view class="advertising_box" @click="fenxiang">
					<image src="/static/shangmen/5.png" mode="aspectFill" class="advertising_box_img"></image>
					<view class="advertising_box_text">育儿嫂</view>
				</view>
			</view> -->
			<!-- <view class="hot">
				<view class="hot_top"> 加盟商品 </view>
				<scroll-view scroll-x class="hot_list">
					<view style="display: flex;margin-left: -25upx;">
						<view class="hot_list_box" v-for="(item,index) in good_list" :key="index"
							@click="hot_tap(item.brand_id)">
							<image class="hot_list_box_image" :src="item.image" mode="aspectFill"></image>
							<view class="hot_list_box_text">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view> -->
			<view style="display: flex;padding: 20upx;">
				<image @click="brand_tap" :src="che" style="width: 334upx;height: 174upx;"></image>
				<image @click="home_tap"  :src="jia" style="width: 334upx;height: 174upx;margin-left: 25upx;"></image>
			</view>
			<view class="list" style="background: rgba(0, 0, 0, 0);margin-top: -44upx;">
				<view class="title" @click="more_taps">
					<view style="display: flex;">
						<view class="titless" style="z-index: 2;">推荐服务</view>
						<!-- <view class="titles"></view> -->
						<view style="width: 72upx;height: 17upx;border-radius: 20upx;background: #97BEFA;margin-top: 28upx;margin-left: -60upx;"></view>
						<!-- <image src="/static/shangmen/6.png" style=""></image> -->
					</view>
					<!-- <view class="titlesss"> {{gengxing_key}} 更多 > </view> -->
				</view>
				<view class="list_all" style="background: rgba(0, 0, 0, 0);">
					<view class="list_box" v-for="(item,index) in good_list" :key="index"
						@click="shop_details(item.goods_id,item)">
						<image style="border-radius: 20rpx 20rpx 0 0;" class="list_box_image" mode="aspectFill" :src="item.image"></image>
						<view style="background: #fff;padding: 10rpx 8rpx; border-radius: 0 0 20rpx 20rpx;">
							<view class="list_box_title syht" style="font-family: Source Han Sans;font-size: 28rpx;font-weight: normal;line-height: normal;color: #5A5A5A;">{{item.name}}</view>
							<view class="list_box_titles" style="font-family: Source Han Sans;font-size: 20rpx;color: #E93131;vertical-align: bottom;">
								券后￥
								<text style="font-family: OPPOSans;font-size: 44rpx;font-weight: 500;vertical-align: bottom;line-height: 1;">{{item.price}}</text>
								{{item.unit ?  item.unit : '起'}}
							</view>
							<!-- <view class="list_box_titles">积分{{item.price}}</view> -->
						</view>
					</view>
					<view class="AllBottom" v-if="good_list.length == 0">暂无更多数据</view>
				</view>
			</view>
			<!-- <view class="list">
				<view style="width: 100%;
					text-align: center;
					background: #c3bd9b;
					font-size: 34upx;
					color: #fff;
					font-weight: bold;
					padding: 20upx 0;"> - 鸿毅酒商城 - </view>
				<view class="list_all">
					<view class="list_box" v-for="(item,index) in goods_list" :key="index"
						@click="shop_details(item.goods_id)">
						<image class="list_box_image" mode="aspectFill" :src="item.image"></image>
						<view class="list_box_title">{{item.name}}</view>
						<view class="list_box_titles">￥{{item.price}} + 积分 {{item.integral}}</view>
					</view>
					<view class="AllBottom" v-if="goods_list.length == 0">暂无更多数据</view>
				</view>
			</view> -->
			<view class="version" v-if="gengxing_key != 0">
				<view class="version_box">
					<view class="version_box_text">版本更新进度</view>
					<view class="version_box_text_a">正在下载 {{gengxing}} % / 100% </view>
					<view class="version_box_text_a">请等待下载！ </view>
				</view>
			</view>
			<view class="tan" v-if="is_tan">
				<image :src="image" @click="goods_id_tap" mode="aspectFill" style="width: 590upx;height: 655upx;margin-left: 85upx;margin-top: 25vh;border-radius: 120upx 0 120upx 0;"></image>
				<image @click="is_tan_tap" src="/static/shangmen/8.png" style="width: 60upx;height: 60upx;margin-top: 60upx;margin-left: 344upx;"></image>
			</view>
			
			<view class="coupons" v-if="coupon_key && couponList.length > 0" @click.stop="coupon_tap_yc">
			<!-- -->
				<view class="coupons_box"  @click.stop="coupon_tap_dk"  :style="{'backgroundImage': 'url('+couponImage+')'}">
					<!-- <view class="" style="text-align: center;">
						优惠详情
					</view> -->
					<view class="coupons_item" v-for="(coupon,index) in couponList" :key="coupon.coupon_id" v-show="index <= 3">
						<view class="coupons_item_left">
							<view class="" style="font-size: 46rpx; font-weight: 700;color: #fc2626;">
								<span style="font-size: 28rpx;">￥</span>{{coupon.money}}
							</view>
						</view>
						<view class="coupons_item_center">
							<view class="" style="color: #333;" v-if="coupon.condition">
								满{{coupon.condition}}元可用
							</view>
							<view class="" style="color: #333;" v-else>
								无使用门槛
							</view>
							<view class=""  style="color: #c5c0c1;">
								{{coupon.start_time}}~{{coupon.end_time}}
							</view>
						</view>
					</view>
					<view class="coupons_btn" @click.stop="receiveCoupon" >
						<!-- 立即领取 -->
					</view>
				</view>
				<image @click="coupon_tap_yc" src="/static/shangmen/8.png" style="width: 60upx;height: 60upx;position: absolute;bottom: 100rpx;left: 345rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import urlConfig from 'common/config.js';
	export default {
		data() {
			return {
				value_data:'',
				is_tan:false,
				autoplay:true,
				banner_list: [],
				good_list:[],
				goods_list:[],
				// goods_lists:[],
				current:[],
				url:'',
				version:1,
				gengxing_key:0,
				gengxing:0,
				inform_data: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				longitude:'',
				latitude:'',
				city:'',
				car_name:'',
				image:'',
				goods_id:'',
				che:'',
				jia:'',
				couponImage:'',
				couponList:[],
				coupon_key:true,
			}
		},
		onShow() {
			// if( !uni.getStorageSync('mobile') ) {
			// 	this.user_login_code_api()
			// 	return
			// }
			this.user_login_code_api()
			// this.getLocation_api()
			if (uni.getMenuButtonBoundingClientRect()) {
			      console.log('当前为小程序环境！');
			} else {
			      console.log('当前不是小程序环境！');
				  this.version_api()
			}
		},
		onLoad() {
			// 正确示范
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#cf4052",
			})
			// this.goods_index_api()
			// this.goodss_index_api()
		},
		onShareAppMessage() {
			return {
			      title: '二月生活',
			      path: '/pages/index/index'
			    }
		},
		onShareTimeline(){
			return {
			      title: '二月生活',
			      path: '/pages/index/index'
			    }
		},
		methods: {
			goods_id_tap() {
				uni.navigateTo({
					url:'../shop_details/shop_details?goods_id='+this.goods_id
				})
			},
			getCoupon(){
				this.$request(this.$Api.index_coupon_api, {
					access_token: uni.getStorageSync('access_token'),
				}, "POST").then(res => {
					if (res.data.code == 0) {
						this.couponImage = res.data.data.bg_img
						this.couponList = res.data.data.list
						console.log("优惠券信息：", this.couponList);
						if(this.couponList.length <= 0){
							this.coupon_tap_yc()
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			confirm_tap() {
				if( this.value_data != '' ) {
					// this.goods_type_api()
					uni.navigateTo({
						url:'../commodity_list/commodity_list?keyword='+this.value_data
					})
				}
			},
			input_tap(num) {
				this.value_data = num.detail.value
			},
			user_login_code_api() {
				var that = this
				uni.login({
				  provider: 'weixin', //使用微信登录
				  success: function (loginRes) {
					var datas = {
						code:loginRes.code,
					}
					that.$request(that.$Api.user_login_code_api,datas,"POST").then(res => {
						console.log('res',res)
						if (res.data.code == 0) {
							uni.setStorageSync('access_token', res.data.data.access_token);
							that.getLocation_api()
							that.getCoupon()
							// uni.navigateBack()
							// uni.reLaunch({
							// 	url:'/pages/login/disembark/disembark'
							// })
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					})
				  }
				});
			},
			home_tap() {
				uni.switchTab({
					url: '/pages/news/news'
				});
			},
			index_notice_api() {
				var that = this
				that.$request(that.$Api.index_notice_api, {
					access_token: uni.getStorageSync('access_token'),
					city:that.city,
				}, "POST").then(res => {
					if (res.data.code == 0) {
						console.log('res.data',res.data.data)
						that.car_name = res.data.data.car_name
						that.inform_data = res.data.data.notice
						that.image = res.data.data.list.image
						that.goods_id = res.data.data.list.goods_id
						that.che = res.data.data.che
						that.jia = res.data.data.jia
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			getLocation_api() {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.longitude = res.longitude
						that.latitude = res.latitude
						that.index_city_api(res.longitude,res.latitude)
					},
					fail(eee) {
						that.longitude = 120.20375
						that.latitude = 30.33018
						that.index_city_api(that.longitude,that.latitude)
						console.log('eee：' + JSON.stringify(eee));
					}
				});
			},
			index_city_api(longitude,latitude) {
				var that = this
				that.$request(that.$Api.index_city_api, {
					access_token:uni.getStorageSync('access_token'),
					longitude:longitude,
					latitude:latitude,
				},"POST").then(res => {
					console.log('res.data.data',res.data.data.city)
					that.city = res.data.data.city
					uni.setStorageSync('city', res.data.data.city);
					that.banner_index_api()
					that.goods_index_api()
					that.index_notice_api()
				})
			},
			brand_tap() {
				uni.navigateTo({
					url:'../conserve/conserve'
				})
				// if( this.car_name != '' ) {
				// 	uni.navigateTo({
				// 		url:'../conserve/conserve'
				// 	})
				// }else{
				// 	uni.navigateTo({
				// 		url:'../brand/brand'
				// 	})
				// }
			},
			is_tan_tap() {
				this.is_tan = false
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			//检查更新
			version_api() { 
				var _this = this
				uni.request({
					url: urlConfig.Url + 'code/version', 
					data: {
						access_token:uni.getStorageSync('access_token'),
						version:'1.0.21',
						// phone:uni.getStorageSync('model')
					},
					method:'POST',
					header: { 
						'content-type': 'application/x-www-form-urlencoded' 
					},
					success: (res) => {
						// console.log('r检查更新----+++++',res)
						var url = res.data.data.url
						_this.url = res.data.data.url
						if( res.data.code == 1 ) { //可选择更新
							_this.gengxing_key = 1
							_this.doUpData(url)
						}else{//正常
							_this.gengxing_key = 0
						}
					}
				});
			},
			fuzhi(url) {
				var that = this 
				uni.setClipboardData({
				    data: that.url,
				    success: function () {
				        console.log('success');
				    }
				});
				// that.doUpData()
			},
			//更新进度
			doUpData(url) {
				var that = this
				console.log('gengxin',url)
				// var url = 'http://112.124.35.197:8081/1/1.apk'
			    that.downloadTask =  uni.downloadFile({//执行下载
			        url: url, //下载地址
			        success: downloadResult => {//下载成功
			            if (downloadResult.statusCode == 200) {
			                uni.showModal({
			                    title: '',
			                    content: '更新成功，确定现在重启吗？',
			                    confirmText: '重启',
			                    confirmColor: '#EE8F57',
			                    success: function(res) {
			                        if (res.confirm == true) {
			                            plus.runtime.install(//安装
			                                downloadResult.tempFilePath, {
			                                    force: true
			                                },
			                                function(res) {
			                                    utils.showToast('更新成功，重启中');
			                                    plus.runtime.restart();
			                                }
			                            );
			                        }
			                    }
			                });
			            }else{
							console.log('shibai',downloadResult)
						}
			        }
			    });
				that.downloadTask.onProgressUpdate((res) => {
					that.gengxing = res.progress
					if( that.gengxing == 100 ) {
						that.gengxing_key = 0
					}
				    // console.log('下载进度' + res.progress);
				    // console.log('已经下载的数据长度' + res.totalBytesWritten);
				    // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				    // 测试条件，取消下载任务。
				    // if (res.progress > 50) {
				    //     downloadTask.abort();
				    // }
				});
			},
			assets() {
				uni.navigateTo({
					url:'../assets/assets'
				})
			},
			news() {
				uni.navigateTo({
					url:'../news/newss'
				})
			},
			fenxiang() {
				uni.navigateTo({
					url:'../promotion/promotion'
				})
			},
			more_tap() {
				uni.navigateTo({
					url:'../welfare/welfare'
				})
			},
			more_taps() {
				// uni.navigateTo({
				// 	url:'../welfares/welfares'
				// })
			},
			previewImage_tap(link) {
				var that = this
				uni.navigateTo({
					url:'../wbeView/wbeView?link='+link
				})
				// 预览图片
				// var url = [url]
				// // console.log('url',url)
				// uni.previewImage({
				// 	current:index,
				// 	urls: url,
				// 	longPressActions: {
				// 		itemList: [],
				// 		success: function(data) {
				// 			console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				// 		},
				// 		fail: function(err) {
				// 			console.log(err.errMsg);
				// 		}
				// 	}
				// });
			},
			//详情
			shop_details(goods_id,item) {
				uni.navigateTo({
					// url: '../shop_details/shop_details?goods_id=' + goods_id + '&key=1'
					url: '../shop_details/shop_details?goods_id=' + goods_id + '&key=3'
				})
			},
			//普通商品
			goods_index_api() {
				var that = this
				that.$request(that.$Api.goods_index_api, {
					access_token: uni.getStorageSync('access_token'),
					city:that.city
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.goods_list = res.data.data.list
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			goodss_index_api() {
				var that = this
				that.$request(that.$Api.goodss_index_api, {
					access_token: uni.getStorageSync('access_token'),
					city:that.city
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.goods_lists = res.data.data.list
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			//加盟
			goods_index_api() {
				var that = this
				that.$request(that.$Api.goods_index_api, {
					access_token: uni.getStorageSync('access_token'),
					city:that.city
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.good_list = res.data.data.list
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			//banner
			banner_index_api() {
				var that = this
				that.$request(that.$Api.banner_index_api, {
					access_token: uni.getStorageSync('access_token'),
					city:that.city
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.current = []
						that.banner_list = res.data.data.list
						for( let i=0;i<that.banner_list.length;i++ ) {
							that.current.push(that.banner_list[i].image)
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			coupon_tap_yc(){
				this.coupon_key = false
			},
			coupon_tap_dk() {
				this.coupon_key = true
			},
			receiveCoupon(){
				var that = this
				that.$request(that.$Api.index_receive_api, {
					access_token:uni.getStorageSync('access_token'),
				},"GET").then(res => {
					if( res.data.code == 0 ){
						that.coupon_key = false
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		.all {
			.tan{
				width: 750upx;
				height: 100vh;
				position: fixed;
				top: 0;
				z-index: 9999;
				background: rgba(0,0,0,.5);
			}
			.inform{
				.inform_banner{
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
					font-size: 24upx;
					color: #666666;
					line-height: 34upx;
					width: 500upx;
					height: 34upx;
					margin-left: 20upx;
				}
				.inform_title{
					width: 56upx;
					height: 34upx;
					background: #1C336B;
					border-radius: 4upx;
					color: #fff;
					font-size: 22upx;
					line-height: 34upx;
					text-align: center;
				}
				width: 670upx;
				padding: 18upx 10upx;
				background: rgba(32,63,138,0.05);
				margin-top: -10upx;
				margin-left: 30upx;
				display: flex;
			}
			.version_box_text_b{
				padding: 30upx 0;
				font-size: 28upx;
				color: #2AC845;
				height: 60upx;
				border: 1upx solid #2AC845;
				border-radius: 20upx;
				width: 450upx;
				margin-left: 25upx;
			}
			.version_box_text_a{
				padding: 10upx 0;
				font-size: 28upx;
				color: #333333;
				width: 450upx;
				margin-left: 25upx;
			}
			.version_box_text{
				text-align: center;
				font-size: 28upx;
				color: #333333;
			}
			.version_box{
				width: 500upx;
				padding: 20upx 0;
				margin-left: 125upx;
				position: fixed;
				top: 40vh;
				background: #FFFFFF;
				z-index: 4;
				border-radius: 20upx;
			}
			.version{
				width: 750upx;
				height: 100vh;
				background: rgba(0,0,0,.5);
				position: fixed;
				top: 0;
				z-index: 3;
			}
			.advertising{
				.advertising_box{
					.advertising_box_img{
						width: 60upx;
						height: 60upx;
					}
					.advertising_box_text{
						font-size: 26upx;
						margin-top: 6upx;
					}
					width: 25%;
					text-align: center;
				}
				width: 750upx;
				padding: 25upx 0;
				background: #fff;
				display: flex;
				justify-content: space-around;
			}
			
			.hot {
				.hot_list {
					.hot_list_box {
						// margin-left: 25upx;
						margin-top: 10upx;
						width: 180upx;

						.hot_list_box_text {
							width: 180upx;
							text-align: center;
							font-size: 28upx;
							height: 40upx;
							line-height: 40upx;
						}

						.hot_list_box_image {
							margin-left: 25upx;
							border: 1upx solid #eee;
							width: 130upx;
							height: 130upx;
							border-radius: 10upx;
						}
					}

					width: 700upx;
					padding: 10upx 0;
				}

				.hot_top {
					width: 100%;
					text-align: center;
					background: #EA4E29;
					font-size: 32upx;
					color: #fff;
					font-weight: bold;
					padding: 20upx 0;
				}

				width: 700upx;
				padding: 25upx;
				box-shadow: 0 10upx 10upx 0 rgba(132, 87, 16, 0.1);
			}

			.classify {
				.classify_box {
					position: relative;
					font-size: 30upx;
					font-weight: bold;
					text-align: center;
					padding: 0 15upx;
					height: 60upx;
					white-space: nowrap;
					border-bottom: 0upx solid #EA4E29;
				}

				.classify_boxs {
					font-size: 30upx;
					font-weight: 400;
					color: #ccc;
					text-align: center;
					height: 60upx;
					padding: 0 15upx;
					white-space: nowrap;
				}

				.classify_box::before {
					position: absolute;
					content: '';
					height: 40upx;
					width: 25%;
					height: 6upx;
					display: block;
					// margin: 44upx 0 0 0;
					left: 50%;
					top: 44upx;
					transform: translateX(-50%); //居中处理
					border-bottom: 2px solid #EA4E29;
					// border-radius: 0 0 200upx 200upx; 
				}

				width: 700upx;
				padding: 25upx;
			}

			.list {
				.title{
					.titlesss{
						font-size: 26upx;
						color: #666;
						height: 36upx;
						line-height: 36upx;
					}
					.titless{
						font-size: 32upx;
						font-weight: bold;
						height: 36upx;
						line-height: 36upx;
						margin-left: 10upx;
					}
					.titles{
						width: 10upx;
						height: 36upx;
						background: #cf4052;
					}
					width: 700upx;
					margin-left: 25upx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1upx solid #eee;
				}
				.hot_top {
					font-size: 32upx;
					font-weight: bold;
					padding: 25upx;
				}

				.list_all {
					.list_box {
						.list_box_titles {
							font-family: "OPPOSans";
							font-size: 30rpx;
							font-weight: bold;
							color:  #b41021;
							padding-top: 10rpx;
						}

						.list_box_title {
							font-family: "Source Han Sans CN", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
							width: 330upx;
							font-size: 28rpx;
							color: #000000;
						}

						.list_box_image {
							width: 345upx;
							height: 345upx;
							border-radius: 50upx 0upx 50upx 0upx;		
							display: block;
							background: #fff;
							image {
								background: #fff;
							}
						}

						width: 345upx;
						padding-top: 16upx;
					}

					width: 700upx;
					display: flex;
					justify-content: space-between;
					flex-direction: row;
					flex-wrap: wrap;
					padding: 0 25upx;
				}

				width: 750upx;
				padding: 0 0 25upx 0;
				background: #fff;
			}

			.top {
				width: 750upx;
				// height: 500upx;
				padding: 25upx 0;
				margin-top: -30upx;

				.swiper {
					width: 750upx;
					// height: 400upx;
					// margin-left: 25upx;
					border-radius: 20upx;
					.swiper_img{
						margin: 30upx 0 0 30upx;
						width: 690upx;
						height: 280upx;
					}
				}
			}

			.title {
				.title_box {
					.title_box_text {
						font-size: 24upx;
						color: #333333;
						font-weight: bold;
						margin-left: 20upx;
						line-height: 42upx;
					}

					.title_box_image {
						width: 38upx;
						height: 38upx;
					}

					// padding-left: 450upx;
					// position: absolute;
					margin-right: 25upx;
					margin-top: 10upx;
					display: flex;
				}

				.title_text {
					font-size: 32upx;
					color: #333333;
				}

				padding: 22upx 0;
				width: 750upx;
				display: flex;
				justify-content: space-between;
				margin-top: 50upx;
			}
		}
		
		background: #EDF0F5;
	}
	.coupons{
		width: 750upx;
		position: fixed;
		bottom: 0;
		height: 100vh;
		background: rgba(0,0,0,.5);
		z-index: 100000;
		box-sizing: border-box;
		.coupons_box{
			width: 700rpx;
			height: 1050rpx;
			margin: 25rpx;
			position: fixed;
			bottom: 50%;
			transform: translateY(50%);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
			padding: 300rpx 50rpx 200rpx;
			min-height: 400upx;
			box-sizing: border-box;
			border-radius: 30rpx;
			.box_top{
				display: flex;
			}
		}
	}
	.coupons_item {
		border-radius: 20rpx;
		padding: 10rpx;
		display: flex;
		position: relative;
		font-size: 28rpx;
		width: 600rpx;
		height: 137rpx;
		margin-top: 30rpx;
		box-sizing: border-box;
		background-image: url('../../static/coupon.png');
		background-size: 100% 100%;
		
		&_left {
			width: 165rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin-right: 30rpx;
			justify-content: center;
		}
		&_center {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			width: calc(100% - 195rpx);
			padding: 20rpx 0;
		}
		&_right {
			box-sizing: border-box;
			height: 50rpx;
			line-height: 50rpx;
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translateY(-50%);
			padding: 0rpx 14rpx;
			background-color: #ff4242;
			border-radius: 25rpx;
			color: #fff;
		}
	}
	.coupons_btn {
		height: 85rpx;
		width: 460rpx;
		position: absolute;
		bottom: 124rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 35rpx;
		color: #fff;
		// background-color: #ff4242;
	}
</style>
